<<<<<<< HEAD
<template>
  <!-- Login -->
  <div id="login">
    <div id="login-form">
      <h1>登陆界面</h1>
      <label for="name"><i class="el-icon-user-solid" style="color: #c1c1c1"></i></label>
      <input type="number" placeholder="用户名" id="name" autocapitalize="off" v-model.trim=name aria-autocomplete="off">
      <p style="visibility: hidden">用户名为必填选项</p>
      <label for="password"><i class="el-icon-right" style="color: #c1c1c1"></i></label>
      <input type="password" placeholder="密码" id="password" autocapitalize="off" v-model.trim="password">
      <p style="visibility: hidden">密码为必填选项</p>
      <div>
        <el-button type="primary" v-on:click="inputInfo">登录</el-button>
        <el-button type="info" v-on:click="resetInfo">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data: function () {
    return {
      name: '',
      password: '',
    }
  },
  methods: {
    // 清空当前填写信息
    resetInfo: function () {
      this.name = "";
      this.password = "";
    },
    // 验证信息是否正确
    inputInfo: function () {
      if (this.name !== "admin@qq.com") {
        this.password = "";
        return 'err';
      }
      if (this.password !== "12345678") {
        this.password = "";
        return 'err';
      }
      // 返回上面 , 提交信息
      this.requestInfo();
      // 跳转到 /home
      this.$router.push("/home");
    }
  },
  computed: {

  },
  mounted() {
    // css transition 样式
    let input = document.querySelectorAll("input");
    let label = document.querySelectorAll("label")
    let is = document.querySelectorAll("i");
    for (let i = 0; i < input.length; i++) {
      input[i].addEventListener("click", function () {
        input[i].style.width = '70%';
        input[i].style.transition = '1s';
        label[i].style.width = '70%';
        label[i].style.transition = '1s';
        is[i].style.color = '#037db3';
      })
      input[i].addEventListener("blur", function () {
        input[i].style.width = '60%';
        input[i].style.transition = '1s';
        label[i].style.width = '60%';
        label[i].style.transition = '1s';
        is[i].style.color = '#c1c1c1';
      })
    }
  },
  watch: {
    // 动态监测,验证 input 中 值的输入
    name: function f() {
      let p = document.querySelectorAll("p");
      if (this.name.length < 1) {
        p[0].innerHTML = "用户名称应大于 1 ";
      }
      if (this.name.length >= 1) {
        p[0].style.visibility = "hidden";
      }
      if (this.name.length === 0) {
        p[0].style.visibility = "visible";
      }
    },
    password: function f() {
      let p = document.querySelectorAll("p");
      if (this.password.length < 8) {
        p[1].style.visibility = "visible";
        p[1].innerHTML = "用户密码应大于 8 ";
      }
      if (this.password.length >= 8) {
        p[1].style.visibility = "hidden";
      }
      if (this.password.length === 0) {
        p[1].innerHTML = "请重新输入密码";
        p[1].style.visibility = "visible";
      }
    }
  }
}
</script>

<style lang="less" scoped>
#login {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  // 背景图片样式
  background-image: url("E:\yang28\yzt1\public\sd.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

#login-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  min-width: 300px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 15px;
  // 表单 box-shadow 样式 好看
  box-shadow: 0 15px 25px rgba(0, 0, 0, .5);

  h1 {
    width: 60%;
    margin: 50px auto 0;
    color: #c1c1c1;
    text-align: center;
  }

  input {
    width: 60%;
    margin: 0 auto;
    // 注意 border outline 默认值
    outline: none;
    border: none;
    padding: 10px;
    border-bottom: 1px solid #fff;
    background: transparent;
    color: white;
  }

  label {
    width: 60%;
    margin: 0 auto;
    position: relative;
    top: 30px;
    left: -15px;
  }

  div {
    width: 60%;
    margin: 10px auto;
    display: flex;
    justify-content: center;
    align-content: center;
  }

  button {
    // rgba
    background-color: rgba(9, 108, 144, 0.5);
    margin: 10px 25px 40px 25px;
  }

  p {
    width: 60%;
    margin: 8px auto;
    position: relative;
    left: -15px;
    color: #ff0000;
    font-size: 8px;
  }
}
// 浏览器兼容 , 针对谷歌浏览器 默认设置的 奇怪样式
input {
  -webkit-text-fill-color: #ffffff !important;
  transition: background-color 5000s ease-in-out ,width 1s ease-out!important;
}

</style>
=======
  <template>
    <div id="app">
      <div class="wrapper">
            <h3>学生录入系统</h3>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="姓名" prop="username">
      <el-input v-model="ruleForm.username"></el-input>
    </el-form-item>
        <el-form-item label="年龄" prop="age">
      <el-input v-model="ruleForm.age"></el-input>
    </el-form-item>
      <el-form-item label="性别" prop="gender">
      <el-radio-group v-model="ruleForm.gender">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
      <br/>
      <div>
        <el-button @click="adduser">增加用户</el-button>
      </div>
      <div> <h3>用户信息表</h3></div>
      <div class="showData">
          <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        label="姓名"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.u1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="年龄"
        width="120">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
                    <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.a1 }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
          <el-table-column
        label="性别"
        width="120">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
                      <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.g1 }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      </div>
      </div>
    </div>
  </template>

  <script>
  export default {
    name: "App",
    data(){
            var checkAge = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('年龄不能为空'));
          }
          setTimeout(() => {
            if (!Number.isInteger(value)) {
              callback(new Error('请输入数字值'));
            } else {
              if (value < 101) {
                callback(new Error('必须小于100岁'));
              } else {
                callback();
              }
            }
          }, 1000);
        };
      return {

        ruleForm:{
        username:"",
        age:20,
        gender:"男",
        },
        rules:{
            username: [
              { required: true, message: '请输入用户名', trigger: 'blur' },
              { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
            ],
            age: [
              { validator: checkAge, trigger: 'blur' }
            ],
            gender:  { required: true, message: '请选择性别', trigger: 'change' } 
        },
        list:[],
        options: [{
            value: '选项1',
            label: '男'
          }, {
            value: '选项2',
            label: '女',
            disabled: true
          }]
      }
    },
    methods:{
      adduser()
      {
        let u = this.ruleForm.username;
        let a = this.ruleForm.age;
        let g = this.ruleForm.gender
        if(u != "" && a >0 && g !="" ){
          let item = {u1:u,a1:a,g1:g}
          this.list.push(item);
          this.username = "";
          this.age=0;
          this.gender="男"
        }
        else {
          return 
        }
      }
    }
  };
  </script>

  <style>
  #app {
  }
  .wrapper{
    /* background-color: aqua; */
    width: 600px;
    margin: 0 auto;
  }
  </style>
>>>>>>> 7c363e0 (28)
